<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript" src="js/test.js"></script>
		<style>
			.d {
				width: 500px;
				height: 500px;
				
				overflow: hidden;
				margin: 50px;
			}
			
			.d1 {
				position: relative;
				width: 300px;
				height: 300px;
				margin: 30px;
				overflow: hidden;
			}
			.d2{position: relative;
				width: 100px;
				height: 100px;
				margin: 30px;
			}
			.d3{position: absolute;
				
				right: 50px;
				top: 50px;
				width: 50px;
				height: 50px;
			}
		</style>
		<script type="text/javascript">
			$(function() {
				init();
			})
		</script>
	</head>
<!--
	作者：819115696@qq.com
	时间：2016-06-22
	描述：
	如果父层是relative或absolute则根据父层来偏移 
	( 可以是祖父层, 取最近的一个)
-->
	<body>
		<div class="d">
			<div class="d1">
				<div class="d2">
					<div class="d3">

			</div>
				</div>
			</div>
			
		</div>
	</body>

</html>